<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>编辑学期教材</title>
    <link rel="stylesheet" href="/element-ui/index.css">
    <link rel="stylesheet" href="/element-ui/fonts/element-icons.css">
    <script src="/element-ui/vue.js"></script>
    <script src="/element-ui/index.js"></script>
    <script src="/element-ui/axios.min.js"></script>
    <style>
        body { font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '\5FAE\8F6F\96C5\9ED1', Arial, sans-serif; background-color: #f5f6fa; }
        #app { padding: 20px; background-color: #f5f6fa; }
        .page-title-bar { font-size: 26px; font-weight: bold; color: #333; background: #fff; padding: 24px 20px 12px 20px; border-bottom: 1px solid #eee; margin-bottom: 20px; letter-spacing: 2px; text-align: center; animation: fadeInDown 0.8s ease-out; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-radius: 8px; }
        @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
        .el-main { padding: 20px; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
        .el-form-item { margin-bottom: 22px; }
    </style>
</head>
<body>
    <div class="page-title-bar">编辑学期教材</div>
    <div id="app">
        <el-container>
            <el-main>
                <el-form :model="form" :rules="rules" ref="form" label-width="120px">
                    <el-form-item label="教材ID" prop="bookId">
                        <el-input v-model="form.bookId"></el-input>
                    </el-form-item>
                    <el-form-item label="教材名称" prop="bookName">
                        <el-input v-model="form.bookName"></el-input>
                    </el-form-item>
                    <el-form-item label="学期" prop="term">
                        <el-input v-model="form.term"></el-input>
                    </el-form-item>
                    <el-form-item label="专业" prop="major">
                        <el-select v-model="form.major" placeholder="请选择专业">
                            <el-option label="计算机系" value="计算机系"></el-option>
                            <el-option label="金融系" value="金融系"></el-option>
                            <el-option label="电子商务系" value="电子商务系"></el-option>
                            <el-option label="大数据系" value="大数据系"></el-option>
                            <el-option label="人工智能系" value="人工智能系"></el-option>
                            <el-option label="艺术设计系" value="艺术设计系"></el-option>
                            <el-option label="医学系" value="医学系"></el-option>
                            <el-option label="环境设计系" value="环境设计系"></el-option>
                            <el-option label="音乐系" value="音乐系"></el-option>
                            <el-option label="老年管理系" value="老年管理系"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('form')">保存</el-button>
                        <el-button @click="goBack">返回</el-button>
                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    form: { id: '', bookId: '', bookName: '', term: '', major: '' },
                    rules: {
                        bookId: [ { required: true, message: '请输入教材ID', trigger: 'blur' } ],
                        bookName: [ { required: true, message: '请输入教材名称', trigger: 'blur' } ],
                        term: [ { required: true, message: '请输入学期', trigger: 'blur' } ],
                        major: [ { required: true, message: '请输入专业', trigger: 'blur' } ]
                    }
                }
            },
            created() {
                // 从URL路径中提取ID
                const pathSegments = window.location.pathname.split('/');
                const id = pathSegments[pathSegments.length - 1];
                if (id && !isNaN(id)) {
                    this.fetchDetail(id);
                }
            },
            methods: {
                fetchDetail(id) {
                    axios.get(`/termbook/api/detail/${id}`)
                        .then(response => {
                            this.form = { ...response.data };
                        })
                        .catch(error => {
                            console.error('Error fetching detail:', error);
                            this.$message.error('获取详情失败');
                        });
                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            axios.post('/termbook/edit', this.form)
                                .then(response => {
                                    this.$message.success('保存成功');
                                    this.goBack();
                                })
                                .catch(error => {
                                    console.error('Error editing:', error);
                                    this.$message.error('保存失败');
                                });
                        } else {
                            return false;
                        }
                    });
                },
                goBack() { window.location.href = '/termbook/list'; }
            }
        });
    </script>
</body>
</html> 